<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="/static/退出键.png" mode="widthFix" class="back-img"></image>
			</view>
			<view class="title">猫猫补充品</view>
			<view class="placeholder"></view>
		</view>
		
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search-box">
				<input type="text" class="search-input" placeholder="搜索猫猫补充品商品" disabled @click="navigateToSearch" />
				<image src="/static/搜索.png" mode="aspectFit" class="search-icon-img"></image>
			</view>
		</view>
		
		<!-- 分类筛选栏 -->
		<view class="filter-bar">
			<view class="filter-item" :class="{active: activeFilter === 'comprehensive'}" @click="setFilter('comprehensive')">
				综合
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'sales'}" @click="setFilter('sales')">
				销量
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'price'}" @click="setFilter('price')">
				价格
				<text class="sort-icon" v-if="activeFilter === 'price'">
					<text v-if="priceSort === 'asc'">↑</text>
					<text v-else-if="priceSort === 'desc'">↓</text>
					<text v-else>↕</text>
				</text>
			</view>
			<view class="filter-item" :class="{active: activeFilter === 'filter'}" @click="setFilter('filter')">
				筛选
			</view>
		</view>
		
		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product-item" v-for="(item, index) in productList" :key="index" @click="navigateToDetail(item.id)">
				<view class="product-left">
					<image class="product-image" :src="item.image" mode="aspectFill"></image>
				</view>
				<view class="product-info">
					<view class="product-name">{{item.name}}</view>
					<view class="product-tags">
						<text class="tag tag-main" v-if="item.tags && item.tags.includes('补钙')">补钙</text>
						<text class="tag tag-sub" v-if="item.tags && item.tags.includes('营养')">营养</text>
					</view>
					<view class="product-sale-info">
						<text class="sale-count">已售{{item.sales}}件</text>
					</view>
					<view class="product-promotion">
						<view class="promotion-tag" v-if="item.freeShipping">满97包邮</view>
						<view class="promotion-tag" v-if="item.promotion">{{item.promotion}}</view>
					</view>
					<view class="product-price-row">
						<view class="price-info">
							<text class="price-symbol">¥</text>
							<text class="product-price">{{item.price}}</text>
							<text class="price-tag" v-if="item.priceTag">{{item.priceTag}}</text>
							<text class="product-original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</text>
						</view>
						<view class="cart-btn">
							<image src="/static/cart/add-cart-btn.png" mode="widthFix" class="cart-icon"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeFilter: 'comprehensive',
				priceSort: '', // 可以是 'asc' 或 'desc' 或空字符串
				productList: [
					{
						id: 1,
						name: '猫咪综合维他命营养膏120g',
						price: 89.9,
						originalPrice: 109.9,
						sales: 2145,
						image: '/static/猫猫专区.png',
						promotion: '买2送1',
						freeShipping: true,
						tags: ['营养']
					},
					{
						id: 2,
						name: '猫咪钙片幼猫专用补钙粉60g',
						price: 59.9,
						originalPrice: 79.9,
						sales: 1876,
						image: '/static/猫猫专区.png',
						promotion: '满99减20',
						priceTag: '特惠价',
						freeShipping: true,
						tags: ['补钙', '营养']
					},
					{
						id: 3,
						name: '猫咪肠胃调理益生菌30袋',
						price: 79.8,
						sales: 1593,
						image: '/static/猫猫专区.png',
						freeShipping: true,
						tags: ['营养']
					},
					{
						id: 4,
						name: '猫咪护毛素美毛粉化毛膏120g',
						price: 68.9,
						originalPrice: 88.9,
						sales: 1287,
						image: '/static/猫猫专区.png',
						promotion: '限时特惠',
						freeShipping: true,
						tags: ['营养']
					}
				]
			}
		},
		onLoad(options) {
			this.loadProductData()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					fail: function() {
						uni.switchTab({
							url: '/pages/shop/cat-products',
							fail: function() {
								uni.redirectTo({
									url: '/pages/shop/cat-products'
								});
							}
						});
					}
				});
			},
			navigateToSearch() {
				uni.navigateTo({
					url: '/pages/search/index',
					fail: function(err) {
						console.error('导航到搜索页面失败:', err);
						uni.showToast({
							title: '搜索功能即将上线',
							icon: 'none'
						});
					}
				});
			},
			setFilter(filter) {
				if(filter === 'price' && this.activeFilter === 'price') {
					// 如果已经是价格筛选，则切换排序方向
					if(this.priceSort === 'asc') {
						this.priceSort = 'desc'
					} else if(this.priceSort === 'desc') {
						this.priceSort = ''
					} else {
						this.priceSort = 'asc'
					}
				} else {
					this.activeFilter = filter
					if(filter !== 'price') {
						this.priceSort = ''
					} else if(this.priceSort === '') {
						this.priceSort = 'asc'
					}
				}
				// 根据筛选条件重新加载数据
				this.loadProductData()
			},
			navigateToDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/product-detail?id=' + id,
					fail: function(err) {
						console.error('导航到商品详情失败:', err);
						uni.showToast({
							title: '商品详情加载失败',
							icon: 'none'
						});
					}
				});
			},
			loadProductData() {
				console.log('加载猫猫补充品数据，筛选条件:', this.activeFilter, '价格排序:', this.priceSort);
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 20rpx;
		background-color: #F8F8F8;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		position: relative;
	}
	
	.back-btn {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.back-img {
		width: 40rpx;
		height: 40rpx;
	}
	
	.title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.placeholder {
		width: 60rpx;
	}
	
	.search-container {
		padding: 6rpx 20rpx 0 20rpx;
		background-color: #FFFFFF;
	}
	
	.search-box {
		display: flex;
		align-items: center;
		background-color: #F5F5F5;
		border-radius: 30rpx;
		padding: 10rpx 20rpx;
		height: 60rpx;
		box-sizing: border-box;
		position: relative;
	}
	
	.search-input {
		width: 100%;
		font-size: 26rpx;
		color: #333;
		height: 40rpx;
		line-height: 40rpx;
		padding-right: 50rpx;
	}
	
	.search-icon-img {
		position: absolute;
		right: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}
	
	.filter-bar {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding: 0 20rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	
	.filter-item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
		position: relative;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.filter-item.active {
		color: #FF0000;
		font-weight: bold;
	}
	
	.sort-icon {
		margin-left: 4rpx;
		color: #999;
	}
	
	.product-list {
		padding: 15rpx 20rpx;
	}
	
	.product-item {
		display: flex;
		padding: 20rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
		border-radius: 8rpx;
	}
	
	.product-left {
		margin-right: 20rpx;
	}
	
	.product-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}
	
	.product-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.product-name {
		font-size: 28rpx;
		color: #333333;
		line-height: 1.4;
		margin-bottom: 10rpx;
	}
	
	.product-tags {
		display: flex;
		margin-bottom: 10rpx;
	}
	
	.tag {
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
	
	.tag-main {
		background-color: #F5F5F5;
		color: #333;
	}
	
	.tag-sub {
		background-color: #F5F5F5;
		color: #666;
	}
	
	.product-sale-info {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 10rpx;
	}
	
	.product-promotion {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}
	
	.promotion-tag {
		background-color: #FFF1F1;
		color: #FF6600;
		font-size: 22rpx;
		padding: 2rpx 8rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}
	
	.product-price-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.price-info {
		display: flex;
		align-items: baseline;
	}
	
	.price-symbol {
		color: #FF0000;
		font-size: 24rpx;
	}
	
	.product-price {
		color: #FF0000;
		font-size: 36rpx;
		font-weight: bold;
		margin-right: 8rpx;
	}
	
	.price-tag {
		background-color: #FFF1F1;
		color: #FF6600;
		font-size: 20rpx;
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		margin-right: 8rpx;
	}
	
	.product-original-price {
		color: #999999;
		font-size: 24rpx;
		text-decoration: line-through;
	}
	
	.cart-btn {
		width: 60rpx;
		height: 60rpx;
	}
	
	.cart-icon {
		width: 100%;
		height: 100%;
	}
</style> 